<template>
  <div class="p-4">
    <div class="p-4 bg-white">
      <a-button-group class="j-table-operator">
        <a-button type="primary" @click="setDis(0)">启用</a-button>
        <a-button type="primary" @click="setDis(1)">禁用</a-button>
        <a-button type="primary" @click="getValues()">校验表单并获取值</a-button>
        <a-button type="primary" @click="setValues()">设置值</a-button>
      </a-button-group>

      <BasicForm @register="register" @submit="handleSubmit" />
    </div>
  </div>
</template>

<script lang="ts">
  export default {
    title: "富文本 | Markdown",
    name: "MarkdownDemo",
  }
</script>

<script lang="ts" setup>
  import { FormSchema, useForm, BasicForm } from "/@/components/Form"
  import { useMessage } from "/@/hooks/web/useMessage"

  const { createMessage, createSuccessModal } = useMessage()

  const schemas: FormSchema[] = [
    {
      field: "name",
      component: "Input",
      label: "姓名",
      required: true,
      defaultValue: "zhangsan",
    },
    {
      field: "tinymce",
      component: "JEditor",
      label: "富文本",
      defaultValue: "defaultValue",
      required: true,
    },
    {
      field: "markdown",
      component: "JMarkdownEditor",
      label: "Markdown",
      defaultValue: "# 张三",
      required: true,
      componentProps: {
        height: 300,
      },
    },
  ]

  const [register, { setProps, validate, setFieldsValue }] = useForm({
    labelWidth: 120,
    schemas: schemas,
    actionColOptions: {
      span: 24,
    },
    compact: true,
    showResetButton: false,
    showSubmitButton: false,
    showAdvancedButton: false,
    disabled: false,
  })

  function handleSubmit(values) {
    console.log(values)
  }

  function setDis(flag) {
    setProps({ disabled: !!flag })
  }

  async function getValues() {
    try {
      const values = await validate()
      console.log(values)
      createSuccessModal({
        title: "校验通过",
        content: `${JSON.stringify(values)}`,
      })
    } catch (error) {
      createMessage.warning("检验不通过")
    }
  }

  function setValues() {
    setFieldsValue({
      name: "LiSi",
      markdown: "# 李四",
      tinymce: '<p><strong><span style="font-size: 18pt;">张<span style="color: #e03e2d;">三</span>丰</span></strong></p>',
    })
  }
</script>

<style scoped></style>
